<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div0 {
				width: 50px;
				height: 50px;
				background-color: green;
				position: absolute;
			}
			#div1 {
				width: 100px;
				height: 100px;
				background-color: #000000;
				float: left;
				/* 
					float
						left：靠左
						right：靠右
						none
				 */
			}
			#div2 {
				width: 200px;
				height: 200px;
				background-color: red;
			}
			#div3 {
				width: 100px;
				height: 100px;
				background-color: yellow;
				float: left;
			}
			#div4 {
				width: 500px;
				height: 100px;
				background-color: yellow;
				float: right;
			}
		</style>
	</head>
	<body>
		<!-- 
			绝对定位与浮动很相似
				1、绝对定位，有z-index，层级比浮动的层级要高
				2、浮动没有z-index
			浮动的元素
				1、脱离普通文档流，相当于它的宽和高不会影响后面元素
				2、浮动的元素和定位元素都会将元素变为内联块级元素，
					有内容，没有指定宽和高，则内容决定
				3、浮动的元素，会随着页面的宽和高变化位置
				4、文字会受浮动元素的影响
				5、浮动和绝对定位的元素，会引起父元素的高度塌陷(崩溃)，即高度为0
		 -->
		 
		 <div id="div0">
		 	绝对定位文档流
		 </div>
		 <div id="div1">
		 	浮动文档流
		 </div>
		 <div id="div3">
		 	浮动文档流
		 </div>
		 <div id="div4">
		 	浮动文档流
		 </div>
		 <div id="div2">
		 	普通文档流
		 </div>
	</body>
</html>
